<template>
    <div class="my-login-box">
        <!-- <h1>登录</h1> -->
        <form class="my-login-form" id="login-form">
            <!-- <div class="login-tabs">
                <button type="button" class="tab active">邮箱/用户名</button>
                <button type="button" class="tab">手机号</button>
            </div> -->
            <div>
                <input type="text" id="my-login-username" name="username" autocomplete="username"
                    :placeholder="language.emailPlaceholder" v-model="formData.username" @change="usernameChange"
                    required>
            </div>

            <!-- <div>
                <input type="password" id="my-login-password" name="password" autocomplete="current-password"
                    placeholder="请输入密码" v-model="formData.password" required>
            </div>
            <div class="options">
                <label> <input type="checkbox" class="my-checkbox" @click="changeCheckbox" /> 绑定到IP地址(安全选项) </label>
                <a href="#" class="forgot-password" @click="changeForgotPwd">忘记密码</a>
            </div>

            <button type="submit" class="my-login-button" @click="changeLogin">登录</button> -->
        </form>
    </div>
</template>

<script>
import { language } from '@/content-scripts/locales';
export default {
    name: "LoginPage",
    data() {
        return {
            // isVisible: true
            formData: {
                username: "",
                password: "",
                // bindToIp: false,
            },
            language: language
        };
    },
    methods: {
        usernameChange(e) {
            console.log(e.target.value, 'wwwwwwww');
            localStorage.setItem('username', e.target.value);
            if (localStorage.getItem('userInfo')) {
                localStorage.removeItem('userInfo');
            }

            const emailInput = document.querySelector(`input.mantine-Input-input[placeholder="${this.language.originEmailPlace}"]`) || document.querySelector(
                'input[type="text"][name="email"], input[type="text"][name="username"], input[type="email"]'
            );
            if (emailInput) {
                emailInput.value = e.target.value;
                emailInput.dispatchEvent(new Event("input", { bubbles: true }));
            } else {
                console.log('未找到input[type="text"][name="email"], input[type="text"][name="username"], input[type="email"]输入框');

            }

        },
        changeCheckbox() {
            console.log("点击了");
            const checkbox = document.querySelector(".login-ip-container input");
            console.log(checkbox);
            console.log(checkbox.checked, 'wei');
            if (checkbox) {
                checkbox.click();
                checkbox.dispatchEvent(new Event("change", { bubbles: true }));
                console.log(checkbox.checked);
            }
        },
        changeForgotPwd() {
            console.log('点击了忘记密码');
            const forgotPass = document.querySelector(".login-forget-password");
            if (forgotPass) {
                forgotPass.click();
            }
        },
        changeLogin(e) {
            e.preventDefault();
            // const box = document.querySelector('.my-login-box')
            // const username = box.querySelector("#my-login-username").value;
            // const password = box.querySelector("#my-login-password").value;
            // 填充到原页面输入框（如有）
            const emailInput = document.querySelector(
                'input[type="text"][name="email"], input[type="text"][name="username"], input[type="email"]'
            );
            const passwordInput = document.querySelector('input[type="password"]');
            if (emailInput) {
                emailInput.value = this.formData.username;

                localStorage.setItem('username', this.formData.username);
                emailInput.dispatchEvent(new Event("input", { bubbles: true }));
            }
            if (passwordInput) {
                passwordInput.value = this.formData.password;
                passwordInput.dispatchEvent(new Event("input", { bubbles: true }));
            }
            // 自动点击原登录按钮
            const loginButton = document.querySelector(
                ".login-button-container button"
            );
            if (loginButton) {
                loginButton.click();
                // 移除弹窗
                // overlay.remove();
            }
        },
        generateLoginLayer() {
            // document.querySelector(".my-checkbox").addEventListener("click", () => {

            // });

            // document.querySelector(".forgot-password").addEventListener("click", () => {

            // })

            document.querySelectorAll(".tab").forEach((tab, index) => {
                tab.addEventListener("click", () => {
                    document
                        .querySelectorAll(".tab")
                        .forEach((t) => t.classList.remove("active"));
                    tab.classList.add("active");
                    // 根据需要切换输入框内容
                    if (index === 0) {
                        document.getElementById("username").placeholder = this.language.emailPlaceholder;
                    } else {
                        document.getElementById("username").placeholder = this.language.phonePlaceholder;
                    }
                });
            });

            // 登录表单交互
            // const form = box.querySelector('.my-login-form');
            //     document
            //         .getElementById("login-form")
            //         .addEventListener("submit", function (e) {
            //             e.preventDefault();
            //             const username = box.querySelector("#my-login-username").value;
            //             const password = box.querySelector("#my-login-password").value;
            //             // 填充到原页面输入框（如有）
            //             const emailInput = document.querySelector(
            //                 'input[type="text"][name="email"], input[type="text"][name="username"], input[type="email"]'
            //             );
            //             const passwordInput = document.querySelector('input[type="password"]');
            //             if (emailInput) {
            //                 emailInput.value = username;
            //                 emailInput.dispatchEvent(new Event("input", { bubbles: true }));
            //             }
            //             if (passwordInput) {
            //                 passwordInput.value = password;
            //                 passwordInput.dispatchEvent(new Event("input", { bubbles: true }));
            //             }
            //             // 自动点击原登录按钮
            //             const loginButton = document.querySelector(
            //                 ".login-button-container button"
            //             );
            //             if (loginButton) {
            //                 loginButton.click();
            //                 // 移除弹窗
            //                 // overlay.remove();
            //             }
            //         });
        }
    }
};
</script>

<style scoped>
/* 登录弹窗覆盖层 */
.my-login-overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.0);
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: auto;
}

.my-login-box {
    background: #fff;
    border-radius: 16px;
    /* box-shadow: 0 8px 32px rgba(0,0,0,0.10); */
    /* padding: 20px 0 16px 0; */
    min-width: 320px;
    max-width: 588px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.my-login-box h1 {
    font-size: 40px;
    font-weight: bold;
    margin-bottom: 6px;
    color: #222;
    text-align: left;
    width: 100%;
}

.login-tabs {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 16px;
}

.tab {
    background: none;
    border: none;
    font-size: 16px;
    padding: 10px 0;
    cursor: pointer;
    border-bottom: 2px solid transparent;
}

.tab.active {
    /* border-bottom: 2px solid #000;
  font-weight: bold; */
    border-bottom: 2px solid transparent;
    /* 设置透明边框 */
    /* font-weight: bold; */
    background: linear-gradient(to right, white 40%, black 40%, black 60%, white 60%) no-repeat bottom;
    background-size: 100% 2px;
    /* 背景宽度为100%，高度为2px，与边框高度一致 */
}

.my-login-form {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 18px;
}

.my-login-form label {
    font-size: 15px;
    color: #222;
    margin-bottom: 6px;
    font-weight: 500;
}

.my-login-form input {
    width: 100%;
    height: 48px;
    font-size: 18px;
    border: 1.5px solid #f0f0f0;
    border-radius: 8px;
    background: #f5f6f7;
    outline: none;
    padding: 0 14px;
    box-sizing: border-box;
    transition: border 0.2s;
    box-shadow: none;
}

.my-login-form input:focus {
    border: 1.5px solid #007bff;
    background: #fff;
}

.options {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    font-size: 14px;
}

.options label {
    display: flex;
    align-items: center;
}

.options .forgot-password {
    color: #333;
    text-decoration: none;
    text-decoration: underline;
}

.options .forgot-password:hover {
    text-decoration: underline;
}

.my-login-button {
    width: 100%;
    /* width: 100%; */
    padding: 16px 0;
    background: #222;
    color: #fff;
    border: none;
    border-radius: 24px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    margin-top: 10px;
    transition: background 0.2s;
}

.my-login-button:hover {
    background: #444;
}

.my-login-links {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin-top: 10px;
    font-size: 14px;
}

.my-login-links a {
    color: #007bff;
    text-decoration: none;
}

.my-login-links a:hover {
    text-decoration: underline;
}

.my-checkbox {
    width: 15px !important;
    height: 15px !important;
    accent-color: #222 !important;
    border: 1.5px solid #d9d9d9 !important;
    border-radius: 4px !important;
    margin-right: 8px !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
}
</style>